<template>
  <div class="main">
    <div class="mainTitle">
      <h2>用户管理</h2>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add"
          >新增</el-button
        >
      </div>
    </div>
    <TableList
    :loading="loading"
      :tabledata="tableData"
      :tabledatacolumn="tableDataColumn"
      :params="searchform"
      @handleCurrentChange="handleCurrentChange"  @handleSizeChange="handleSizeChange"
    >
      <template v-slot:default="info">
      <el-button v-if="info.info.roleCode != 'admin'" type="text" @click="handleEdit(info.info)" >编辑</el-button>
      <el-button v-if="info.info.roleCode != 'admin'" type="text" @click="handlexgmm(info.info)" >修改密码</el-button>
      <el-button v-if="info.info.roleCode != 'admin'" type="text" @click="deleteRow(info.info)" >删除</el-button>

      </template>
    </TableList>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="cancel" :close-on-click-modal="false">
      <Form
        :formdata="formdata"
        :formobj="formobj"
        ref="bannerForm"
        :formrules="formrules"
      ></Form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="mmdialogVisible" width="30%" :before-close="cancelpassword" :close-on-click-modal="false">
      <Form
        :formdata="mmformdata"
        :formobj="mmformobj"
        ref="Form"
        :formrules="mmformrules"
      ></Form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelpassword">取 消</el-button>
        <el-button type="primary" @click="submitpassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Form from "@/components/form.vue";
import TableList from "@/components/TableList.vue";
import {
  userAdd,
  userApiqueryAll,
  userApiedit,
  userApidelete,
  userApieditPass
} from "@/api/webpage";
export default {
  name: "webmember",
  components: {
    TableList,
    Form,
  },
  data() {
    return {
      loading:true,
      title: "",
      mmdialogVisible:false,
      dialogVisible: false,
      tableData: [],
      tableDataColumn: [
        { label: "用户名", key: "userName" },
        { label: "昵称", key: "nickName" },
        { label:'所属大队', key:'organizationName'}
      ],
      formdata: {
        roleCode:'',
        userName:'',
        password:'',
        nickName:'',
        avatar:'',
        title:''
      },
      mmformdata: {
        id:'',
        oldPass:'',
        newPass:'',
        rnewPass:'',
      },
      mmformobj:[
          // { label: "原密码", key: "oldPass", type: "password" ,disabled:false},
          { label: "新密码", key: "newPass", type: "password" ,disabled:false},
          { label: "重复密码", key: "rnewPass", type: "password" ,disabled:false},
      ],
      mmformrules: {
        // oldPass: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newPass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        rnewPass: { required: true, message: "请重复新密码", trigger: "blur" },
      },
      formobj: [
        { label: "用户名", key: "userName", type: "input"},
        { label: "昵称", key: "nickName", type: "input"},
        { label: "密码", key: "password", type: "password"},
        { label: "所属机构", key: "organizationId", type: "tree" ,},
      ],
      formrules: {
        userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        password: { required: true, message: "请输入密码", trigger: "blur" },
      },
      type: "increased",
      rowId: "",
      searchform: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      mmid:''
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    deleteRow(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row);
          let ids = [];
          ids.push(row.id);
          userApidelete(ids)
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getlist();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    add() {

      this.title = "新增";



      this.type = "increased"
      this.dialogVisible = true
      this.$nextTick(() => {
        this.formdata={
          roleCode:'',
          userName:'',
          password:'',
          nickName:'',
          avatar:'',
          title:''
        }
      })
      this.formobj= [
        { label: "用户名", key: "userName", type: "input"},
        { label: "昵称", key: "nickName", type: "input"},
        { label: "密码", key: "password", type: "password"},
        { label: "所属机构", key: "organizationId", type: "tree" ,},
      ]
      // this.formrules= {
      //   userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      //   nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
      //   password: { required: true, message: "请输入密码", trigger: "blur" },
      // }

    },
    handlexgmm(row) {
      this.title = "修改密码";
      this.mmformdata={
        newPass:'',
        oldPass:'',
        rnewPass:'',
      },
      this.mmdialogVisible = true
      this.mmid = row.id

    },
    handleEdit(row) {
      this.title = "编辑";
      this.type = "edit";
      this.formobj= [
          { label: "昵称", key: "nickName", type: "input"},
      ]
      // this.formrules =  {
      //   nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
      // },
      this.rowId = row.id;
      this.dialogVisible = true;
      this.formdata = JSON.parse(JSON.stringify(row));
    },
    // 获取列表
    getlist() {
      userApiqueryAll(this.searchform)
        .then((res) => {
          if (res.code == 0) {
            this.loading = false
            this.tableData = res.rows
            console.log("🚀 ~ file: index.vue ~ line 200 ~ .then ~ res.rows", res.rows)
            this.searchform.total = res.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.searchform.pageNum = val;
      this.getlist();
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getlist()
    },
    submitpassword(){
      this.$refs.Form.getData().then((res) => {
        if(res.newPass == res.rnewPass){
          res.id = this.mmid
          userApieditPass(res)
            .then((response) => {
              if (response.data == 1) {
                this.$message.success("成功");
                this.$refs.Form.clearValidate();
                this.mmdialogVisible = false;
                this.getlist();
                this.$refs.Form.resetForm();

              } else {
                this.$message.error("失败");
              }
            })
        }else{
          this.$message.error("两次输入密码不一致")
        }
      })
    },
    submit() {
      this.$refs.bannerForm.getData().then((res) => {
        console.log('获取数据',res);
        if (this.type == "edit") {
          res.id = this.rowId;
          userApiedit(res)
            .then((response) => {
              if (response.data == 1) {
                this.$message.success("成功");
                this.$refs.bannerForm.clearValidate();
                this.dialogVisible = false;
                this.getlist();
                this.$refs.bannerForm.resetForm();

              } else {
                this.$message.error("失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          res.roleCode = 'user'
          userAdd(res)
            .then((response) => {
              if (response.data == 1) {
                this.$message.success("成功");
                this.$refs.bannerForm.clearValidate();
                this.dialogVisible = false;
                this.getlist();
                this.$refs.bannerForm.resetForm();

              } else {
                this.$message.error("失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    cancelpassword(){
      this.mmdialogVisible = false;
      this.$refs.Form.resetForm();
      this.$refs.Form.clearValidate();
    },
    cancel() {
      this.dialogVisible = false;
      this.$refs.bannerForm.resetForm();
      this.$refs.bannerForm.clearValidate();


    },
  },
};
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>

